.header-wrapper {
  background: $white-3;
  padding-top: $space-s;
  padding-bottom: $space-s;
  box-shadow: 0 3px 5px transparentize($gray-7, 0.7);
  border-bottom: 3px solid $gray-7;

  position: relative;

  .collapse-button {
    position: absolute;
    z-index: 1;
    display: inline-flex;
    justify-content: center;
    top: 100%;
    left: 50%;
    transform: translate(-50%);
    background: $gray-7;
    cursor: pointer;
    transition: height 100ms 150ms;
    height: 0px;
    width: 20px * 2;
    border-bottom-left-radius: 20px * 2;
    border-bottom-right-radius: 20px * 2;
    box-shadow: 0 3px 5px transparentize($gray-7, 0.7);

    svg {
      position: absolute;
      top: 3px;
      height: 9px;
      width: 9px;
      fill: white;
      stroke: white;
      opacity: 0;
      transition: opacity 100ms;
      transform-origin: center;
    }

    &.visible {
      transition: height 100ms;
      height: 20px;
      svg {
        transition: opacity 100ms 150ms;
        opacity: 1;
      }
    }

    &.expand {
      svg {
        transform: rotate(180deg);
      }
    }
  }
}
